<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8">
    <title>用户列表</title>
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <link rel="stylesheet" th:href="@{lib/bootstrap/css/bootstrap.min.css}"/>
    <link rel="stylesheet" th:href="@{lib/bootstrap/css/daterangepicker.css}"/>
    <link rel="stylesheet" th:href="@{css/oksub.css}"media="all"/>
    <script type="text/javascript" th:src="@{js/jquery.min.js}"></script>
    <script type="text/javascript" th:src="@{lib/bootstrap/js/bootstrap.min.js}"></script>
    <script type="text/javascript" th:src="@{lib/bootstrap/js/coment.js}"></script>
    <script type="text/javascript" th:src="@{lib/bootstrap/js/daterangepicker.js}"></script>
    <script type="text/javascript" th:src="@{js/user.js}"></script>
    <script type="text/javascript" th:src="@{lib/loading/okLoading.js}"></script>
</head>
<style>
    .myrow {
        display: flex;
        flex-direction: row;
        margin-left:1em;
    }

    .xxxx {
        height: 2px;
        background: #999999;
        margin-top: 16px;
        width: 2em;
        margin-left: 1em;
        margin-right: 1em;
    }
    /**
     * 注册提示框样式
     */
    #info{
        display: none;
        width: 200px;
        height: 200px;
        background-color: #000000;
        opacity:0.7;
        border-radius: 30px;
        margin: 150px auto;
        color: white;
        position:absolute;
        top:20%;
        left:30%;
        z-index: 10000;
    }
    #info p{
        text-align: center;
        font-size: 18px;
        padding: 10px;
    }


    #userTable td,th{
        border-left:1px solid #C0C0C0;border-top:1px solid #C0C0C0;text-align: center;
    }
    #userTable th{
        background: #009688;
    }

    #pagination{
        width: 1000px;
        margin: auto;
    }
    @-moz-document url-prefix() {
        fieldset { display: table-cell; }
    }
    #pic{
        width:100px;
        height:100px;
        border: 1px solid #000000;
        border-radius:50% ;
        margin:20px auto;
        cursor: pointer;
    }
    #pic2{
        width:100px;
        height:100px;
        border: 1px solid #000000;
        border-radius:50% ;
        margin:20px auto;
        cursor: pointer;
    }
</style>
<body>


<div class="container" style="margin-top: 20px;margin-bottom: 20px;">
    <div class="row">
        <div class="col-sm-4">
            <div class="btn-group" role="group" aria-label="..." style="margin: auto;">
                <!-- 实现用户添加按钮 -->
                <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#add">
                    用户添加
                </button>
                <!-- 实现用户精确查询按钮 -->
                <button type="button" class="btn btn-success" data-toggle="modal" data-target="#query">
                    精确查询
                </button>
            </div>
        </div>
        <div class="col-sm-4"></div>

        <div class="col-sm-4">
            <div class="input-group">
                <input type="text" id="likeValue" class="form-control" placeholder="只要符合条件均会被查询出来">
                <span class="input-group-btn">
			        <button class="btn btn-default" type="button" id="likeQuery">查询</button>
			      </span>
            </div><!-- /input-group -->
        </div><!-- /.col-lg-6 -->
    </div>
</div>

<div class="modal fade" id="update" tabindex="-1" role="dialog" aria-labelledby="myModalLabel2">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                <h4 class="modal-title" id="myModalLabel2" style="text-align: center;">修改信息</h4>
            </div>
            <div class="modal-body">
                <input hidden="hidden" value="1" id="updateId">
                <input hidden="hidden" value="2" id="updateCurrent">
                <div class="input-group">
                    <span class="input-group-addon" id="basic-addon1" >用&nbsp;&nbsp;户&nbsp;&nbsp;名</span>
                    <input type="text" class="form-control" id="updateName" aria-describedby="basic-addon1" readonly="readonly">
                </div>
                <p>&nbsp;</p>
                <div class="input-group">
                    <span class="input-group-addon" id="basic-addon2">&nbsp;&nbsp;密&nbsp;&nbsp;&nbsp;&nbsp;码&nbsp;&nbsp;</span>
                    <input type="text" class="form-control" id="updatePwd" aria-describedby="basic-addon2">
                </div>
                <p>&nbsp;</p>
                <div class="input-group" id="sexChange">
                    <span class="input-group-addon" id="basic-addon3">&nbsp;&nbsp;性&nbsp;&nbsp;&nbsp;&nbsp;别&nbsp;&nbsp;</span>
                    <select type="text" class="form-control" id="updateSex" aria-describedby="basic-addon3">
                        <option>男</option>
                        <option>女</option>
                    </select>
                </div>
                <p>&nbsp;</p>
                <div class="input-group">
                    <span class="input-group-addon" id="basic-addon4">手&nbsp;&nbsp;机&nbsp;&nbsp;号</span>
                    <input type="text" class="form-control" id="updateMobile" aria-describedby="basic-addon4">
                </div>
                <p>&nbsp;</p>
                <div class="input-group">
                    <span class="input-group-addon" id="basic-addon5">&nbsp;&nbsp;昵&nbsp;&nbsp;&nbsp;&nbsp;称&nbsp;&nbsp;</span>
                    <input type="text" class="form-control" id="updateNick" aria-describedby="basic-addon5" readonly="readonly">
                </div>
                <p>&nbsp;</p>
                <div class="input-group" id="levelChange">
                    <span class="input-group-addon" id="basic-addon6">&nbsp;&nbsp;级&nbsp;&nbsp;&nbsp;&nbsp;别&nbsp;&nbsp;</span>
                    <input type="hidden" id="updateLevelValue" value="大会员">
                    <select type="text" class="form-control" id="updateLevel" aria-describedby="basic-addon6">
                        <option value="普通用户">普通用户</option>
                        <option value="大会员">大会员</option>
                    </select>
                </div>
                <p>&nbsp;</p>
                <div class="input-group">
                    <span class="input-group-addon" id="basic-addon7">创建时间</span>
                    <input type="text" class="form-control" id="updateTime" aria-describedby="basic-addon7" readonly="readonly">
                </div>
                <p>&nbsp;</p>
                <div id="memberInfo" style="display: none;">
                    <div class="input-group">
                        <span class="input-group-addon" id="basic-addon8">本人照片</span>
                        <div class="col-sm-3">
                            <img id="pic2" src="">
                            <input id="upload2" name="file" accept="images/*" type="file" style="display: none"  aria-describedby="basic-addon7" />
                            <input type="hidden" id="fileName2"  />
                            <input type="hidden" id="picture2"  />
                        </div>
                        <div class="col-sm-7" >
                            <p style="font-size: 18px;margin-top: 40px;">点击左侧空心圆实现上传<Strong style="color: green;">(若不填则会选择系统默认)</Strong>，若是更换其他再次点击即可,若取消当前上传请点击
                                <em onclick="stopUpload2()" style="color: red;">取消</em></p>
                        </div>
                    </div>
                    <p>&nbsp;</p>
                    <div class="input-group">
                        <span class="input-group-addon" id="basic-addon9">到期时间</span>
                        <!-- <input type="text" class="form-control" id="updateEnd" aria-describedby="basic-addon9" readonly="readonly">	-->
                        <div class='input-group date' style="width: 14em;" id='datetimepicker3' >
                            <input type='text' class="timeInput form-control" aria-describedby="basic-addon9" id="endMember" style="width: 440px;" value="2020-05-20 23:00:00"/>
                            <span class="input-group-addon">
						                    <span class="glyphicon glyphicon-calendar"></span>
											</span>
                        </div>
                    </div>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                <button type="button" class="btn btn-primary" id="updateUserInfo" data-dismiss="modal">修改</button>
            </div>
        </div>
    </div>
</div>


<!-- 用户添加model -->
<div class="modal fade" id="add" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                <h4 class="modal-title" id="myModalLabel" style="text-align: center;">请填写信息</h4>
            </div>
            <div class="modal-body">
                <form class="form-horizontal">

                    <div class="form-group">
                        <label class="col-sm-2 control-label"  id="usernameHint" style="color:#FF0000;">用户名</label>
                        <div class="col-sm-10">
                            <input type="text" class="form-control" id="user_name" placeholder="字母开头，允许5-16字节，允许字母数字下划线">
                            <input id="usernameJudge" type="hidden" value="0"/>
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-sm-2 control-label" id="passwordHint" style="color:#FF0000;">密码</label>
                        <div class="col-sm-10">
                            <input type="password" class="form-control" id="password" placeholder="以字母开头，长度在6-18之间，只能包含字母数字和下划线">
                            <input id="passwordJudge" type="hidden" value="0"/>
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-sm-2 control-label" style="color:#5FB878;">性别
                            <input id="sex" value="男" type="hidden"/>
                        </label>
                        <div class="col-sm-5">
                            <input onclick="choose(1)" type="text" class="form-control" id="man" value="男" style="background-color:#00C292;text-align: center;"  readonly="readonly">
                        </div>
                        <div class="col-sm-5">
                            <input onclick="choose(0)" type="text" class="form-control" id="woman" value="女" style="background-color:#B8C3C5;text-align: center;"  readonly="readonly">
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-sm-2 control-label" id="mobileHint" style="color:#FF0000;">手机号</label>
                        <div class="col-sm-10">
                            <input type="tel" class="form-control" id="mobile" placeholder="请输入十一位有效数字，开头数字为13,14,15,18">
                            <input id="mobileJudge" type="hidden" value="0"/>
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-sm-2 control-label" style="color:#5FB878;">类型
                            <input id="level" value="user" type="hidden"/>
                        </label>
                        <div class="col-sm-5">
                            <input onclick="choose(3)" type="text" class="form-control" id="user" value="普通用户" style="background-color:#00C292;text-align: center;"  readonly="readonly">
                        </div>
                        <div class="col-sm-5">
                            <input onclick="choose(4)" type="text" class="form-control" id="member" value="大会员" style="background-color:#B8C3C5;text-align: center;"  readonly="readonly">
                        </div>
                    </div>
                    <div id="cardInfo" style="display: none;">

                        <div class="form-group">
                            <label class="col-sm-2 control-label"  style="color:#5FB878;">本人照</label>
                            <div class="col-sm-3">
                                <img id="pic" src="">
                                <input id="upload" name="file" accept="images/*" type="file" style="display: none"/>
                                <input type="hidden" id="fileName"  />
                                <input type="hidden" id="picture"  />
                            </div>
                            <div class="col-sm-7" >
                                <p style="font-size: 18px;margin-top: 40px;">点击左侧空心圆实现上传<Strong style="color: green;">(若不填则会选择系统默认)</Strong>，若是更换其他再次点击即可,若取消当前上传请点击
                                    <em onclick="stopUpload()" style="color: red;">取消</em></p>
                            </div>
                        </div>
                        <div class="form-group" id="member-level"  style="color:#5FB878;">
                            <label class="col-sm-2 control-label">会员卡</label>
                            <div class="col-sm-10">
                                <select class="form-control" id="cardLevel">
                                    <option>月卡</option>
                                    <option>半年卡</option>
                                    <option>年卡</option>
                                    <option>两年卡</option>
                                    <option>十年卡</option>
                                </select>
                            </div>
                        </div>
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                <button type="button" class="btn btn-primary" id="addUser" data-dismiss="modal">添加</button>
            </div>
        </div>
    </div>
</div>


<!-- 用户添加model -->
<div class="modal fade" id="query" tabindex="-1" role="dialog" aria-labelledby="myModalLabel1">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                <h4 class="modal-title" id="myModalLabel1" style="text-align: center;">请填写详细信息</h4>
            </div>
            <div class="modal-body">
                <form class="form-horizontal">
                    <h2 style="text-align: center;">选中你需要的条件即查询</h2>
                    <hr/>
                    <div class="form-group">
                        <div class="col-sm-4">
                            <input type="text" class="form-control" id="userName" value="名称" style="background-color:#B8C3C5;text-align: center;"  readonly="readonly">
                            <input type="hidden" id="userNameValue" value="0"/>
                        </div>
                        <div class="col-sm-4">
                            <input type="text" class="form-control" id="userPwd" value="密码" style="background-color:#B8C3C5;text-align: center;"  readonly="readonly">
                            <input type="hidden" id="userPwdValue" value="0"/>
                        </div>
                        <div class="col-sm-4">
                            <input type="text" class="form-control" id="userSex" value="性别" style="background-color:#B8C3C5;text-align: center;"  readonly="readonly">
                            <input type="hidden" id="userSexValue" value="0"/>
                        </div>
                    </div>
                    <div class="form-group">
                        <div class="col-sm-4">
                            <input type="text" class="form-control" id="userNick" value="昵称" style="background-color:#B8C3C5;text-align: center;"  readonly="readonly">
                            <input type="hidden" id="userNickValue" value="0"/>
                        </div>
                        <div class="col-sm-4">
                            <input type="text" class="form-control" id="userMobile" value="手机号" style="background-color:#B8C3C5;text-align: center;"  readonly="readonly">
                            <input type="hidden" id="userMobileValue" value="0"/>
                        </div>
                        <div class="col-sm-4">
                            <input type="text" class="form-control" id="userDate" value="时间段" style="background-color:#B8C3C5;text-align: center;"  readonly="readonly">
                            <input type="hidden" id="userDateValue" value="0"/>
                        </div>
                    </div>
                    <div class="form-group" id="userNameDiv" style="display: none;">
                        <label class="col-sm-2 control-label" >用户名</label>
                        <div class="col-sm-10">
                            <input type="text" class="form-control" id="divName" placeholder="只填写一部分也能查询">
                        </div>
                    </div>
                    <div class="form-group" id="userPwdDiv" style="display: none;">
                        <label class="col-sm-2 control-label" >密码</label>
                        <div class="col-sm-10">
                            <input type="text" class="form-control" id="divPwd" placeholder="只填写一部分也能查询">
                        </div>
                    </div>
                    <div class="form-group" id="userSexDiv" style="display: none;">
                        <label class="col-sm-2 control-label" >性别</label>
                        <div class="col-sm-10">
                            <select class="form-control" id="divSex">
                                <option>男</option>
                                <option>女</option>
                            </select>
                        </div>
                    </div>
                    <div class="form-group" id="userNickDiv" style="display: none;">
                        <label class="col-sm-2 control-label" >昵称</label>
                        <div class="col-sm-10">
                            <input type="text" class="form-control" id="divNick" placeholder="只填写一部分也能查询">
                        </div>
                    </div>
                    <div class="form-group" id="userMobileDiv" style="display: none;">
                        <label class="col-sm-2 control-label" >手机号</label>
                        <div class="col-sm-10">
                            <input type="text" class="form-control" id="divMobile" placeholder="只填写一部分也能查询">
                        </div>
                    </div>
                    <div class="form-group" id="userDateDiv" style="display: none;">
                        <label class="col-sm-2 control-label" >时间段</label>
                        <div class="col-sm-10">
                            <div class="myrow">
                                <div class='input-group date' style="width: 14em;" id='datetimepicker1'>
                                    <input type='text' class="timeInput form-control"  id="divStart"/>
                                    <span class="input-group-addon">
					                    <span class="glyphicon glyphicon-calendar"></span>
										</span>
                                </div>
                                <div class="xxxx">

                                </div>
                                <div class='input-group date' style="width: 14em;" id='datetimepicker2'>
                                    <input type='text' class="timeInput form-control" id="divEnd"/>
                                    <span class="input-group-addon">
					                    <span class="glyphicon glyphicon-calendar"></span>
										</span>
                                </div>
                            </div>
                        </div>
                    </div>

                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                <button type="button" class="btn btn-primary" id="bestQuery"  data-dismiss="modal">查询</button>
            </div>
        </div>
    </div>
</div>

<!--提示框-->
<div id="info">
    <span id="msg"></span>
</div>

<div class="table-responsive container-fluid">
    <table  id="userTable" cellspacing="1" cellpadding="0" class="table table-hover col-sm-12">
        <tr>
            <th>编号</th>
            <th>用户名</th>
            <th>密码</th>
            <th>性别</th>
            <th>头像</th>
            <th>手机号</th>
            <th>创建时间</th>
            <th>昵称</th>
            <th>级别</th>
            <th>个人照</th>
            <th>操作1</th>
            <th>操作2</th>
        </tr>
    </table>
</div>
<div id="pagination">
    <div class="row">
        <div class="col-sm-3">
            <p>&nbsp;</p>
            <button class="btn btn-default disabled">
                共 <span class="badge" id="pages">0</span>页
            </button>
        </div>
        <div class="col-sm-3">
            <p>&nbsp;</p>
            <button class="btn btn-default disabled">
                共 <span class="badge" id="total">0</span>条数据
            </button>
        </div>

        <div class="col-sm-6" id="pageOperation">
            <nav aria-label="Page navigation" >
                <ul class="pagination">
                    <li class="previous" onclick="nextPage(1);">
                        <a href="javascript:;">
                            <span aria-hidden="true">&larr;</span> 首页
                        </a>
                    </li>
                    <li onclick="nextPage(2);">
                        <a href="javascript:;" aria-label="Previous" >
                            <span aria-hidden="true">&laquo;</span>
                        </a>
                    </li>
                    <li class="active">
                        <a href="javascript:;">
                            <span id="one">1</span>
                        </a>
                    </li>
                    <li onclick="nextPage(3);">
                        <a href="javascript:;" aria-label="Next">
                            <span aria-hidden="true">&raquo;</span>
                        </a>
                    </li>
                    <li class="next" onclick="nextPage(0);"><a href="javascript:;">尾页
                        <span aria-hidden="true">&rarr;</span></a>
                        <input type="hidden" value="20" id="pageEnd"/>
                    </li>
                </ul>
            </nav>
        </div>
    </div>
</div>
</body>
<script>
    $(function() {
        $('#form1').hide();
        var picker1 = $('#datetimepicker1').datetimepicker({
            format: 'YYYY-MM-DD',
            locale: moment.locale('zh-cn'),
            //minDate: '2016-7-1'
        });
        var picker2 = $('#datetimepicker2').datetimepicker({
            format: 'YYYY-MM-DD',
            locale: moment.locale('zh-cn')
        });
        //动态设置最小值
        picker1.on('dp.change', function(e) {
            picker2.data('DateTimePicker').minDate(e.date);
        });
        //动态设置最大值
        picker2.on('dp.change', function(e) {
            picker1.data('DateTimePicker').maxDate(e.date);
        });
    });
    $('#datetimepicker1').datetimepicker({
        format: 'YYYY-MM-DD HH:mm:ss',
        locale: moment.locale('zh-cn'),
        defaultDate: "2020-03-01 00:00:00"
    });
    $('#datetimepicker2').datetimepicker({
        format: 'YYYY-MM-DD HH:mm:ss',
        locale: moment.locale('zh-cn'),
        defaultDate: "2022-03-01 00:00:00"
    });
    $('#datetimepicker3').datetimepicker({
        format: 'YYYY-MM-DD HH:mm:ss',
        locale: moment.locale('zh-cn'),
        defaultDate: "2020-03-01 00:00:00"
    });
</script>
</html>
